<template>
	<view class="page-box">
		<view class="order" v-for="(item, index) in list" :key="item.goodsId">
			<view class="item">
				<view @click="toDetail(item)" class="left">
					<image :src="item.image.split(',')[0]" mode="aspectFill"></image>
				</view>
				<view @click="toDetail(item)" class="content">
					<view style="color: #d53b33;" v-if="item.type == '0'">闲置</view>
					<view style="color: #0171e7;" v-if="item.type == '1'">求购</view>
					<view class="title u-line-3">{{ item.introduce }}</view>
				</view>
				<view class="right">
					<view @click="toDetail(item)" class="price" style="color:#d53b33;">
						￥{{ item.price }}
					</view>
					<view @click="deleteCollect(item)" class="bottom">
						<view class="evaluate btn">取消收藏</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" @loadmore="loadmore" bgColor="#f2f2f2"></u-loadmore>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		getMyCollectApi,
		cancelCollectApi
	} from '../../api/goods.js'
	import {
		onReachBottom,
		onReady
	} from '@dcloudio/uni-app';
	const list = ref([])
	//列表参数
	const parm = reactive({
		userId: uni.getStorageSync("userId"),
		currentPage: 1,
		pageSize: 10
	})
	//总页数
	const pages = ref(0)
	//获取收藏列表数据
	const getMyCollect = async () => {
		let res = await getMyCollectApi(parm)
		if (res && res.code == 200) {
			pages.value = res.data.pages //获取页数
			list.value = list.value.concat(res.data.records)
		}
	}
	//跳转详情页
	const toDetail = (item) => {
		uni.setStorageSync('goodsId', item.goodsId)
		if (item.type == '1') {
			uni.navigateTo({
				url: "../buy_detail/buy_detail?goods=" + JSON.stringify(item)
			})
		} else if (item.type == '0') {
			uni.navigateTo({
				url: "../unused_detail/unused_detail?goods=" + JSON.stringify(item)
			})
		}

	}
	const collectId = ref('')
	//删除收藏
	const deleteCollect = (item) => {
		uni.showModal({
			title: '确定取消收藏吗？',
			success: function(res) {
				if (res.confirm) {
					collectId.value = item.collectId
					cancelCollect(collectId)
				}
			}
		})
	}
	const cancelCollect = async(collectId)=>{
		let res = await cancelCollectApi({
			collectId:collectId.value
		})
		if(res && res.code == 200){
			console.log("删除成功")
			parm.currentPage = 1
			list.value = []
			getMyCollect()
		}
	}
	const status = ref('loadmore')
	//加载更多
	const loadmore = () => {
		if (parm.currentPage >= pages.value) {
			status.value = 'nomore'
			return
		}
		status.value = 'loaading'
		parm.currentPage = ++parm.currentPage
		getMyCollect()
	}
	//触底加载
	onReachBottom(() => {
		if (parm.currentPage >= pages.value) {
			status.value = 'nomore'
			return
		}
		status.value = 'loaading'
		parm.currentPage = ++parm.currentPage
		getMyCollect()
	})
	onReady(() => {
		getMyCollect()
	})
</script>

<style lang="scss">
	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.left {
				margin-right: 20rpx;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}
			}

			.right {
				margin-left: auto;
				padding-top: 20rpx;
				text-align: right;

				.bottom {
					display: flex;
					margin-top: 50rpx;
					padding-left: 20rpx;

					.btn {
						line-height: 52rpx;
						width: 130rpx;
						border-radius: 26rpx;
						border: 2rpx solid $u-border-color;
						font-size: 26rpx;
						text-align: center;
						color: $u-type-info-dark;
					}

					.evaluate {
						color: $u-type-warning-dark;
						border-color: $u-type-warning-dark;
					}
				}
			}
		}
	}
</style>